<template>
  <div class="navigation">
    <el-menu mode="horizontal" @select="changeSidebar">
      <el-submenu index="1" style="float: right; margin-right: 30px">
        <template slot="title"><span style="font-size: 1.3em">{{ username }}</span></template>
        <el-menu-item index="/orderList">我的订单</el-menu-item>
        <el-menu-item @click="manageAddrDialog = true">管理收货地址</el-menu-item>
        <el-menu-item index="/goodList">产品列表</el-menu-item>
        <el-menu-item index="logout" @click.native="logout">退出登录</el-menu-item>
      </el-submenu>
    </el-menu>

    <el-dialog :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" title="管理收货地址"
      :visible.sync="manageAddrDialog" width="57%" center>
      <AddrList mode="editAndDelete"></AddrList>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";

import AddrList from '@/components/addrList'


export default {
  name: "Navigation",

  components: {
    AddrList
  },

  data() {
    return {
      manageAddrDialog: false,
    }
  },

  computed: {
    ...mapState({
      username: (state) => state.login.username,
    }),
  },
  methods: {
    changeSidebar(path, index) {
      if (path !== "logout") this.$router.push(path);
    },

    async logout() {
      this.$confirm("确定退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("Logout").then(() => {
            this.$message.success("退出成功!");
            location.href = "/login";
          });
        })
        .catch(() => { });
    },
  },

  filters: {
    dateFormat: function (val, args) {
      var time = new Date(val);
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var day = time.getDate();

      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;

      if (args.toLowerCase() === "yyyy-mm-dd") {
        return year + "年" + month + "月" + day + "日";
      } else {
        var hour = time.getHours();
        var min = time.getMinutes();
        var sec = time.getSeconds();

        if (hour < 10) hour = "0" + hour;
        if (min < 10) min = "0" + min;
        if (sec < 10) sec = "0" + sec;

        return (
          year +
          "年" +
          month +
          "月" +
          day +
          "日" +
          " " +
          hour +
          ":" +
          min +
          ":" +
          sec
        );
      }
    },
  },
};
</script>

<style>
.el-menu--collapse .el-menu .el-submenu,
.el-menu--popup {
  min-width: 80px !important;
}

.addr-oper-btn {
  margin-bottom: 30px;
}
</style>